package views

templ base() {
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Server Sent Events</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />

        <style>
          @keyframes reaction-animation {
                0% {
                  transform: translateY(0);
                }
                25% {
                  transform: translateY(-5px);
                }
                50% {
                  transform: translateY(0);
                }
                100% {
                  transform: translateY(0);
                }
          }

          .animated {
            animation: reaction-animation 0.5s;
          }

          .reaction-buttons form {
            display: inline;
          }

          .reaction-buttons button {
            font-size: 0.8rem !important;
          }
        </style>
    </head>
    <body>
        <div class="container p-4">
            { children... }
        </div>
        <script src="https://unpkg.com/htmx.org@1.9.11"></script>
        <script src="https://unpkg.com/htmx.org@1.9.11/dist/ext/sse.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    </body>
    </html>
}
